<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>51微贷</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../css/common.css">
		<link rel="stylesheet" type="text/css" href="../css/icomoon/style.css">
		<script type="text/javascript" src="../js/rem.js"></script>
	</head>

	<body class="bg">
		<div class="m-common m-securitypwd m-recharge">
			<h3 class="header f-pr">
				<span>充值</span>
				<i class="icon-angle-left f-pa"></i>
			</h3>
			<!--<p class="tips">
				<i class="warning"></i>
				<span>无忧微贷当前账户余额<span id="balance">0.00</span>元</span>
			</p>
			<ul>
				<li>
					<label>充值金额</label>
					<input type="text" class="amount" value="100" placeholder="建议输入100的整数倍金额" id="amount">
					<i class="close-icon f-pa"></i>
				</li>
				<li>
					<label>手续费</label>
					<input type="text" class="fee" id="fee" value="0.16" placeholder="充值手续费" readonly="readonly">
				</li>
				<li>
					<label>到账金额</label>
					<input type="text" class="realamount" id="realamount" value="99.84" placeholder="充值到账金额" readonly="readonly">
				</li>
			</ul>
			<div class="btn-box">
				<a class="btn" id="recharge">确认充值</a>
			</div>-->
			
			<div class="detail">
				<h4>温馨提示</h4>
				<p>1、用户可以通过以下汇款或转账方式进行账户充值操作。请仔细确认汇款账户信息以免出错。</p>
				<p>2、汇款或转账后请把相关截图和平台账号、真实姓名发与我司财务，我司收到银行流水后会第一时间进行处理。</p>
			</div>
			<div class="account">
				<div class="bg"></div>
				<div class="info">
					<p>
						<label>开户名：</label>
						<span>无忧微贷</span>
					</p>
					<p>
						<label>开户账号：</label>
						<span class="color">11119*********2801</span>
					</p>
					<p>
						<label>开户银行：</label>
						<span>深圳农业银行</span>
					</p>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="../js/zepto.min.js"></script>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript">		
			var info = {
				init: function() {
					$.ajax({
						url: base + 'account/availablebalance',
						type: 'get',
						data: {
							'id': parseInt(plus.storage.getItem('user_id'))
						},
						dataType: 'json',
						success: function(data) {
							console.log('balance:' + data.balance);
							$('#balance').html(data.balance);
						},
						error: function(data) {
							console.error(JSON.stringify(data));
						}
					});
				},
				recharge: function() {
					$('#recharge').bind('tap', function() {
						var amount = $('#amount').val();
						//大于0且最多两位小数的正数
						var regex = /^([1-9][0-9]*(\.[0-9]{1,2})?|0\.(?!0+$)[0-9]{1,2})$/;
						if(!regex.test(amount)) {
							mui.toast("充值金额格式不正确");
							return;
						}
						$.ajax({
							url: base + 'account/recharge',
							type: 'post',
							data: {
								'user': parseInt(plus.storage.getItem('user_id')),
								'amount': amount
							},
							dataType: 'json',
							success: function(data) {
								console.log('recharge:' + JSON.stringify(data));
								if(data.result) {
									var embed = plus.webview.create('pnrpay-recharge.html', "", {
										top: "63px",
										bottom: "0px",
										position: 'dock',
										dock: 'bottom',
										bounce: 'vertical'
									}, {
										html: data.html
									});
									plus.webview.currentWebview().append(embed);
								} else {
									mui.toast(data.message);
								}
							},
							error: function(data) {
								console.error(JSON.stringify(data));
							}
						});
					});
				},
				
				fee: function(){
					$('#amount').on('keyup', function(){
						//大于0且最多两位小数的正数
		                var regex = /^([1-9][0-9]*(\.[0-9]{1,2})?|0\.(?!0+$)[0-9]{1,2})$/;
		                if (!regex.test($(this).val())) {
		                    mui.toast('充值金额格式不正确');
		                    return false;
		                } else {
		                    var amount = parseFloat($(this).val());
		                    var fee = (parseFloat(amount) * 0.0016);
		                    $('#fee').val(fee.toFixed(2));
		                    $('#realamount').val((amount - fee).toFixed(2));
		                }
					});
				}
			}

			mui.plusReady(function() {
				info.init();
				info.recharge();
				info.fee();
				$('.icon-angle-left').on('tap', function() {
					mui.back();
				});
			});
			
			function recharge_callback() {
				var recharge_result = plus.storage.getItem('recharge_result');
				var url=recharge_result === 'True'?'rechargesuccess.html':'rechargeerror.html';
				plus.webview.getWebviewById('html/account.html').evalJS('init();');
				var embed = plus.webview.create(url, "", {
					top: "0px",
					bottom: "0px",
					position: 'dock',
					dock: 'bottom',
					bounce: 'vertical'
				});
				plus.webview.currentWebview().append(embed);
			}
		</script>
	</body>

</html>